<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
     <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>一起新闻 </title>
	<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script  type="text/javascript" src="jQuery/startNews.js"></script>
</head>
<style>

.p_margin{

	margin-top:15px;

}


#leftNew p{
	  position:relative;
	  top:80%;

}
.leftNew{
	
	height:150px;

}
.centerNew{
	
	height:150px;

}
.centerNew p{

	position:relative;
	top:80%;
}
.centerNew_bottom{
	
	height:150px;
	margin-top:10px;
	
}
.bottomNew{
	height:150px;
	
}
.enermyNews_img{
	height:150px;
	
	margin-left:30px;
	margin-top:10px


}
.newImg{
	
	width: 100%;
    height: 100%;
    background-size: 100% 100%;
    box-shadow:3px 2px 10px #848484;
   
	

}
a{

	color: #949494 ;

}

a:hover{
	
	color:#800000;

}

.radio_div{
	
	position:relative;
	top:85%;
	height:25px;
	
}

.radio{
	
	
    width:10px;
    height:80%;
    cursor: pointer;
	float:left;
	margin-left:2px;
	
}

.title:hover{
	
	border-top:5px solid #800000;

}

.img_bottom_div{

	position:relative;
	top:86%;
	background:#848484;
	opacity:0.7;

}
.img_bottom_div a{

	color:white;
}

</style>
<script>
	$.ajax({
		type : "post",
		url : "<c:url value='/NewsServlet?method=newsJson'/>",          //servlet需要提前在web.xml里面注册
		dataType : "json",
		data :{},
		success : function(data,textStatus)
		{
            //data为后端post函数传递来的数据，这里写结果操作代码
			var objs = eval(data);  //解析json对象
			for(var i = 0;i<objs.length;i++){
			$("#"+objs[i].newsid).text(objs[i].newstitle); //等你写完，我再补全，这里仅作测试
			$("#"+objs[i].newsid+"_img").css({"background-image":"url("+objs[i].newsimg+")"});    //objs[1].img  是存储在数据库中的图片路径；
			//$("#"+objs[i].newsid).before("<img src="+objs[i].newsimg+" alt='图片加载失败'>");
			//$("#"+objs[i].newsid).after("<h4>"+objs[i].newstitle+"</h4>");
			}
		},
		error : function(xhr, status, errMsg)
		{
			alert("数据传输失败!");
		}
});

</script>

<body  onLoad="autoChangeImage()">
<div class="container ">
<head class="header" >                    <!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-image:linear-gradient(to right, #c80000 ,#800000);" >
	<div class="container " > 
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#navbar-collapse">
			<span class="sr-only">切换导航</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
	<a class="navbar-brand brand " href="#" id="userName">一起新闻网 </a>
	</div>
	<div class="collapse navbar-collapse " id="navbar-collapse">
		<ul class="nav navbar-nav navbar-right" >
			<li><a href="#life">生活</a></li>
			<li><a href="#IT">IT</a></li>
			<li><a href="#farm">农业</a></li>
			<li><a href="#affairs">军事</a></li>
			<li><a  href="login.jsp" >>>登陆</a></li>
			<li><a  href="regist.jsp" >>>注册</a></li>
		</ul>
	</div>
	</div>
</nav>
</head>

<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container text-center" >
	<div class="row" >
		
		<h1>I`m Willon,Chinese good man</h1>
		<h4>I`m WeiKing,Chinese good man</h4>
		<h6> ,Chinese bad man</h6>
		<div class=" col-md-12 col-sm-12 "  >
		<a class="btn btn-warning " href="login.jsp" >LoginNow</a>
		<a class="btn btn-default " href="regist.jsp" >SignUp</a>
		</div>
	</div>
</div>
<br/>
<br/>
<br/>
<hr/>
</div>
<div class="container text-center col-md-12 col-sm-12" >
	<h3 style="color:#800000" id="Team">Our News </h3>
	<br>
	<br>
</div>

<div class="container " id="NewsShow">

	<div class="row col-md-12 col-sm-12 col-xs-12"  >               

		<div class="col-md-4 col-sm-6 col-xs-9 " id="leftNew">   <!-- IT新闻框 -->
			
			<h3 id="IT" ><span class="title">IT文化</span></h3>
			<div  class="text-center col-md-12 col-sm-12 col-xs-12 leftNew" >
				<div id="5_img" class="newImg">
					<div class="img_bottom_div">
					<p ><a href="#" id="5">5</a></p>
					</div>
				</div>
			</div>
		
			<div  class="text-center col-md-12 col-sm-12 col-xs-12 leftNew" style="margin-top:5px">
				<div id="6_img" class="newImg">
					<div class="img_bottom_div">
					<p ><a href="#" id="6">6</a></p>
					</div>
				</div>
			</div>
		
			<div class="col-md-12 col-sm-12 col-xs-12 ">
				<p class="p_margin"><a href="#" id="7">7</a></p>
				<p ><a href="#" id="8">8</a></p>
				<p ><a href="#" id="9">9</a></p>
				<p ><a href="#" id="10">10</a></p>
			</div>
		</div>
	
		<div class="col-md-8 col-sm-6 col-xs-12">         <!-- 生活新闻框 -->
			<h3 id="life"><span class="title">生活点滴</span></h3>
			<div  class="text-center col-md-7 col-sm-6 col-xs-9 centerNew" >
				<div id="11_img" class="newImg">
					<div class="img_bottom_div">
					<p ><a href="#" id="11">11</a></p>
					</div>
				</div>
			</div>
			
			<div class="col-md-5 col-sm-12 col-xs-12">
				<p ><a href="#" id="12" >12</a></p>
				<p ><a href="#" id="13">13</a></p>
				<p ><a href="#" id="14">14</a></p>
				<p ><a href="#" id="15">15</a></p>
			</div>
			
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="row">
					<div class="col-md-4 col-sm-6 col-xs-9 centerNew_bottom ">
					<div id="16_img" class="newImg">
					
					</div>
					</div>
					<div class="col-md-8 col-sm-6  col-xs-12  ">
						<p class="p_margin"><a href="#" id="16">16</a></p>
					</div>
				</div>
			</div>
			
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="row">
					<div class="col-md-4 col-sm-6 col-xs-12 centerNew_bottom ">
					<div id="17_img" class="newImg">
					
					</div>
					</div>
					<div class="col-md-8 col-sm-6  col-xs-12  ">
						<p class="p_margin"><a href="#" id="17">17</a></p>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</div>   <!-- 上两个新闻结束 -->

<br/>
<br/>

<hr/>      <!-- 下两个新闻开始-->
<div class="container" >
	<div class="row"> 
	  <!-- 农业新闻 -->
		<div class="col-md-12 col-sm-12 col-xs-12 ">
			<h3 id="farm"><span class="title">农业状况</span></h3>
				<div  class="col-md-5 col-sm-9 col-xs-9 bottomNew" >  <!-- 放图片1行 -->
				<div id="18_img" class="newImg">
					
				</div>
				</div>
				<div class="col-md-7 col-sm-12 col-xs-12">
					<p ><a href="#" id="18">18</a></p>
				</div>
				
		</div>
		
		<div class="col-md-12 col-sm-12 col-xs-12 " style="margin-top:10px">
			
				<div   class="col-md-5 col-sm-9 col-xs-9 bottomNew" >  <!-- 放图片2行 -->
				<div id="19_img" class="newImg">
					
				</div>
				
				</div>
				<div  class="col-md-7 col-sm-12 col-xs-12">
					<p><a href="#" id="19">19</a></p>
				</div>
				
		</div>
		
		<div class="col-md-6 col-sm-12 col-xs-12" >  <!-- 农业文字行1列 -->
			<p class="p_margin"><a href="#" id="20">20</a></p>
			<p ><a href="#" id="21">21</a></p>
			<p ><a href="#" id="22">22</a></p>
		</div>
		
		<div class="col-md-6 col-sm-12 col-xs-12">  <!-- 农业文字行2列 -->
			<p class="p_margin"><a href="#" id="23">23</a></p>
			<p ><a href="#" id="24">24</a></p>
			<p ><a href="#" id="25">25</a></p>
		</div>
		
	</div>
	
	
</div>   <!-- 农业新闻结束 -->

<hr/>
<div class="container">  <!-- 军事新闻开始 -->
	<div class="row">
		<h3 id="affairs"><span class="title">军事战略</span></h3>
		<p ><a href="#" id="26">---------文字有待填充---------</a></p>
		<div class="row" >
				
			<div  class="col-md-3 col-sm-6 col-xs-9 enermyNews_img" > <!-- 3张图片做开头 -->
				 <div id="26_img" class="newImg"></div>
			</div>
			
			<div class="col-md-3 col-sm-6 col-xs-9 enermyNews_img" >
				<div id="27_img" class="newImg"></div>
			</div>
			
			<div  class="col-md-3 col-sm-6 col-xs-9 enermyNews_img" >
				<div id="28_img" class="newImg"></div>
			</div>
		</div>
		<hr/>
		<div class="col-md-12 col-sm-12 col-xs-12 " style="margin-top:10px">
			
				<div class="col-md-5 col-sm-6 col-xs-9 bottomNew" >  <!-- 放图片2行 -->
					<div id="29_img" class="newImg">
					<div class="img_bottom_div">
					<a href="#" id="29">29</a>
					</div>
					</div>
				</div>
				<div class="col-md-7 col-sm-12 col-xs-12">
					<p ><a href="#" id="30">30</a></p>
					<p ><a href="#" id="31">31</a></p>
					<p ><a href="#" id="32">32</a></p>
				</div>
				
		</div>
		
		<div class="col-md-12 col-sm-12 col-xs-12 " style="margin-top:10px">
			
				<div  class="col-md-5 col-sm-6 col-xs-9 bottomNew" >  <!-- 放图片2行 -->
					<div id="33_img" class="newImg">
					<div class="img_bottom_div">
					<a href="#" id="33">33</a>
					</div>
					</div>
				</div>
				<div class="col-md-7 col-sm-12 col-xs-12">
					<p ><a href="#" id="34_title">34</a></p>
					<p><a href="#"  id="35_title">35</a></p>
					<p><a href="#" id="36_title">36</a></p>
				</div>
				
		</div>
		
		
	</div>



</div> <!-- 军事新闻结束 -->






<div class="container text-center"> <!-- 页脚 -->
<h6>版权&copyITxx小分队</h6>
</div>	
</body>
</html>